<template>
  <div class="base-table-box">
    <div class="list-search">
      <!-- 检索 -->
      <div class="list-search-simple">
        <div class="search-inline">
          <div class="search-item">
            <s-select
              :selectOption="member.infoType"
              v-model="params.type"
              style="width: 102px"
            ></s-select>
          </div>
          <div class="search-item">
            <a-input placeholder="请输入搜索内容" />
          </div>

          <div class="search-item btn-group">
            <a-button type="primary">查询</a-button>
            <a-button class="btn-reset">重置</a-button>
            <a-button type="primary" icon="search" @click="openDrop"
              >高级查询</a-button
            >
          </div>
        </div>
        <!-- 按钮 -->
        <div class="upper-right">
          <div class="btn-group">
            <a-button type="primary" class="btn" @click="add">并案</a-button>
            <a-button type="primary" class="btn" @click="add"
              >置换案号</a-button
            >
            <a-button type="primary" class="btn" @click="add"
              >添加联名</a-button
            >
            <a-button type="primary" class="btn" @click="add"
              >导出提案</a-button
            >
            <a-button type="primary" class="btn" @click="add"
              >导出目录</a-button
            >
            <menu-button
              @menuClick="handleMenuClick"
              :menus="[
                { key: 'export', label: '导出答复函' },
                { key: 'export2', label: '导出答复内容' },
                { key: 'export3', label: '导出建议清单' },
                { key: 'export4', label: '设置重点提案' },
                { key: 'export5', label: '设置优秀提案' },
                { key: 'export6', label: '取消重点提案' },
                { key: 'export7', label: '取消优秀提案' }
              ]"
            ></menu-button>
          </div>
        </div>
      </div>
      <!-- 高级检索 -->
      <drawer
        :show="isShowForm"
        :active="isActive"
        :close="isClose"
        @closeDrop="closeDrop"
      >
        <high-form></high-form>
      </drawer>
    </div>
    <!-- 列表 -->
    <a-table
      style="margin-top: 10px"
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%' }"
    >
      <span slot="name" slot-scope="text, record">
        <router-link
          class="link-a"
          :to="{
            path: 'detail',
            query: { id: record.id }
          }"
          >{{ text }}</router-link
        >
      </span>
      <span slot="action" slot-scope="text, record">
        <router-link
          :to="{
            path: 'allList/detail',
            query: { id: record.id }
          }"
          >修改</router-link
        >
        <a-dropdown>
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            <i
              style="margin-left: 10px"
              class="suncnui suncnui-icon-more-vertical"
            ></i>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">撤案</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">导出</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">删除</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>
    <!-- 导入modal -->
    <s-modal
      ref="modalForm"
      class="s-modal"
      :visible="isShowModal"
      title="委员信息导入"
      :model="form"
      @cancel="isShowModal = false"
      @ok="handleUpload"
    >
      <a-form-model-item label="导入模板">
        <a @click="handleDownload">委员基本信息模板下载</a>
      </a-form-model-item>
      <a-form-model-item label="导入文件" prop="file" required>
        <a-upload
          name="file"
          :file-list="fileList"
          :remove="handleRemove"
          :before-upload="beforeUpload"
        >
          <a-button type="primary">选择文件</a-button>
        </a-upload>
      </a-form-model-item>
    </s-modal>
  </div>
</template>

<script>
import MenuButton from 'components/base/menuButton.vue'
import { member } from 'assets/js/select-option-list'
import paging from 'mixins/paging'
import Drawer from 'components/base/drawer.vue'
import HighForm from './allListHighForm.vue'
const columns = [
  {
    title: '序号',
    dataIndex: 'key',
    width: 100
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 120,
    scopedSlots: { customRender: 'name' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '用户名',
    dataIndex: 'username',
    width: 200,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '性别',
    dataIndex: 'sex',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '界别',
    dataIndex: 'strSector',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '党派',
    dataIndex: 'strFaction',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '民族',
    dataIndex: 'nation',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '学历',
    dataIndex: 'education',
    width: 100,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '手机号码',
    dataIndex: 'phone',
    width: 150
  },
  {
    title: '工作单位职务',
    dataIndex: 'duty',
    width: 200
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 120,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  components: { MenuButton, Drawer, HighForm },
  data() {
    return {
      columns,
      member,
      //高级检索表单
      isShowForm: false,
      isActive: false,
      isClose: true,
      //普通检索参数
      params: {
        type: ''
      },
      //导入弹窗
      isShowModal: false,
      form: {},
      fileList: [],
      uploading: false,
      //table相关
      loading: false,
      tableData: []
    }
  },
  mixins: [paging],
  mounted() {},
  methods: {
    getTableData() {
      for (let i = 0; i < this.pagination.pageSize; i++) {
        this.tableData.push({
          id: `ID${i}`,
          key: i + 1,
          name: `King ${i}`,
          username: `Park ${i}`,
          sex: '男',
          strSector: '民革',
          strFaction: '中共',
          nation: '汉族',
          education: '本科',
          phone: '18940836520',
          duty: '商信政通'
          // birthday: '2000-10-01',
        })
      }
      this.pagination.total = 200
    },
    //新增委员信息
    add() {
      this.$router.push('memberlist/addmember')
    },
    //删除该委员记录
    onDelete(record) {
      console.log(record)
      this.$confirm({
        title: '您是否确认要操作所选中的记录？',
        onOk() {
          //请求删除接口
        },
        onCancel() {}
      })
    },
    //点击模板下载时的回调
    handleDownload() {
      alert('触发了下载')
      //请求（下载）接口
    },
    //点击移除文件时的回调
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    //上传文件之前的钩子
    beforeUpload(file) {
      this.fileList = [...this.fileList, file]
      this.fileList = this.fileList.slice(-2)
      return false
    },
    //点击确定按钮上传文件的回调
    handleUpload() {
      const { fileList } = this
      const formData = new FormData()
      fileList.forEach((file) => {
        formData.append('files[]', file)
      })
      this.uploading = true
      //请求（上传）接口
    },
    //扩展按钮（...）下拉选择事件回调
    handleMenuClick(e) {
      console.log('click', e)
    },
    //高级检索表单展开事件
    openDrop() {
      setTimeout(() => {
        this.isShowForm = true
        this.isActive = true
      }, 300)
      this.isClose = false
    },
    //高级检索表单收起事件
    closeDrop() {
      this.isClose = true
      setTimeout(() => {
        this.isShowForm = false
      }, 200)
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
/**modal样式 */
.s-modal {
  a {
    color: blue;
  }
}
/deep/.ant-form {
  padding: 0px 0px 0px 15px;
}
</style>